<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>珠宝溯源系统</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.eeyellow.Timeline.css" />
    <link rel="icon" href="images/index.ico" type="image/x-icon" />
  </head>
  <body>
   <body>
    <div class="container rows">
      <h1>珠宝溯源系统&nbsp;<small>基于区块链技术</small></h1>
      <hr/>

      <div class="col-md-2">
        <table class="table" id="product_list">
          <tr>
            <td>珠宝名称</td>
            <td>ID</td>
          </tr>
        </table>
      </div>
      <div class="col-md-1"></div>
      <div class="form-group col-md-10" style="padding-right: 0px;padding-left: 0px;" >
        <div class="">
          <textarea class="form-control" id="search_id" rows="1"></textarea>
          <br/>
          <button class="btn btn-default" id="search_note">查看珠宝流源</button>

          <button class="btn btn-default" id="add_pro">采矿</button>
          <button class="btn btn-default" data-toggle="modal" data-target="#processModal">添加处理过程</button>
          
          <br/><br/><br/>
          <div class="VivaTimeline">
              <dl id="timeline">
              </dl>
          </div>
        </div>
      </div>

    </div>
    

    <!-- 模态框 -->
    <!-- 添加产品部分 -->
    <div class="modal fade" id="productModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm">
          <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h4 class="modal-title">采矿</h4>
              </div>
              
              <div class="modal-body">
                <form action="">
                  珠宝&nbsp;id&nbsp;&nbsp;&nbsp;：<label id="productId"></label><br/><br/>
                  开采时间：<input type="date" name="" id="productTime"><br/><br/>
                  珠宝名称：<input type="text" name="" id="productName"><br/><br/>
                  珠宝品质：<input type="text" name="" id="productWay"><br/><br/>
                  开采地点：<input type="text" name="" id="productFrom"></br><br/>
                  
                </form>
              </div>

              <div class="modal-footer">
                  <button type="button" class="btn btn-primary" id="add_new">采矿</button>
              </div>
          </div>
      </div>
    </div>
    
    <!-- 添加处理部分 -->
    <div class="modal fade" id="processModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm">
          <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h4 class="modal-title">添加商品处理信息</h4>
              </div>
              
              <div class="modal-body">
                <form action="">
                  产品&nbsp;id&nbsp;&nbsp;&nbsp;：<input type="text" name="" id="processId"><br/><br/>
                  处理名称：<input type="text" name="" id="processName"><br/><br/>
                  处理方式：<input type="text" name="" id="processWay"><br/><br/>
                  处理时间：<input type="date" name="" id="processTime"></br><br/>
                </form>
              </div>

              <div class="modal-footer">
                  <button type="button" class="btn btn-primary" id="add_newProcess">添加处理信息</button>
              </div>
          </div>
      </div>
    </div>

    <!-- 时间轴部分 -->
    <div class="modal fade" id="timeModal-temp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h4 class="modal-title">商品信息</h4>
              </div>
              
              <div class="modal-body">
                  <div class="VivaTimeline">
                      <dl id="timeline">
                      </dl>
                  </div>
              </div>

              <div class="modal-footer">
              </div>
          </div>
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/web3.min.js"></script>
    <script src="js/truffle-contract.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>
